import React from 'react'
export class Main extends React.Component {

  render() {
    const { list, remove, check, type } = this.props
    let newList
    if (type === 'all') {
      newList = list
    } else if (type === 'active') {
      newList = list.filter(item => !item.flag)
    } else {
      newList = list.filter(item => item.flag)
    }
    return (
      <>
        <section className='main'>
          <input className='toggle-all' checked={list.length > 0 && list.every(item => item.flag)} onChange={this.mainAllCheck} type='checkbox' id="toggle-all" />
          <label htmlFor='toggle-all'>Mark all as complete</label>
          <ul className='todo-list'>
            {newList.map(item => (
              <li key={item.id} className={item.flag ? 'completed' : ''}>
                <div className='view'>
                  <input className='toggle' type='checkbox' checked={item.flag} onChange={() => check(item.id)} />
                  <label>{item.content}</label>
                  <button onClick={() => remove(item.id)} className='destroy'></button>
                </div>
                <input className='edit' />
              </li>
            ))}
          </ul>
        </section>
      </>
    )
  }
  mainAllCheck = (e) => {
    console.log(e.target.checked)
    this.setState({
      allCheck: !e.target.checked
    })
    this.props.allCheckFn(this.state.allCheck)
  }
  allClick = () => {

  }
}